import { inject, onMounted } from "vue"
import { sunHttp } from "@/models/getSunHttp"
import { mapStore } from "@/stores/counter"
export const sun = () => {
    const store = mapStore()
    let map
    let scene
    let data
    let geojson_sun
    onMounted(async () => {
        map = inject('$map')
        scene = inject('$scene')
        const res = await sunHttp(store.selectedYear)
        const lines = res.split('\n')
        data = lines.slice(1).map(item => {
            const value = item.split(',')
            return {
                date: value[0],
                name: value[2],
                sun: value[4],
                lng: parseFloat(value[8]),
                lat: parseFloat(value[9])
            }
        })

    })

    const sunClick = async () => {
        store.isEchart = false
        store.issunItem = true
        store.istempItem = false
        store.israinyItem = false
        store.ispmItem = false
        store.isTemp = false
        store.isGDP = false
        store.isPM = false
        store.isRainy = false
        store.isSun = true
        store.isClick = true
        if (scene.getLayer() != 0) {
            scene.removeAllLayer()
        }

        const res = await sunHttp(store.selectedYear)
        const lines = res.split('\n')
        data = lines.slice(1).map(item => {
            const value = item.split(',')
            return {
                date: value[0],
                name: value[2],
                sun: value[4],
                lng: parseFloat(value[8]),
                lat: parseFloat(value[9])
            }
        })

        // 画图
        let sunData_High = data.sort((a, b) => b.sun - a.sun).slice(0, 5)

        // 绘图
        store.sunItem_option = {
            title: {
                text: `${store.selectedYear}年日照强度最高地区`,
                left: 'center',
                top: '10%',
                textStyle: {
                    color: '#fff',

                },
            },
            dataset: {
                source: [
                    ['date', 'sun', 'name'],
                    ...sunData_High.map(item => [item.year, item.sun, item.name])
                ]
            },
            grid: {
                left: '20%',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                name: 'sun', axisLabel: {
                    color: '#fff'
                }
            },
            yAxis: {
                type: 'category', axisLabel: {
                    color: '#fff'
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        x: 'sun',
                        y: 'name'
                    },
                    itemStyle: {
                        color: '#ff2d51'
                    }
                }
            ]
        };


        geojson_sun = {
            type: "FeatureCollection",
            features: data.map(item => ({
                type: 'Feature',
                geometry: {
                    type: 'Point',
                    coordinates: [item.lng, item.lat]
                },
                properties: {
                    date: item.date,
                    name: item.name,
                    sun: item.sun * 3
                }
            }))
        }
        const layer = new L7.HeatmapLayer({})
            .source(geojson_sun)
            .size('sun', [0, 1])
            .shape('heatmap3D')
            // weight映射通道
            .style({
                intensity: 5,
                radius: 10,
                rampColors: {
                    colors: ['#2E8AE6', '#69D1AB', '#DAF291', '#FFD591', '#FF7A45', '#CF1D49'],
                    positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0],
                },
            });

        scene.addLayer(layer);
    }


    const renderSun = () => {
        sunClick()
    }
    return {
        sunClick, renderSun
    }
}